<template>
	<div>
		<div class="banner" @click="handleBannerclick()">
			<img class="banner-img" :src="bannerImg" />
			<div class="banner-info">			
				<div class="banner-title">{{sightName}}</div>
				<div class="banner-number">
					<span class="iconfont banner-icon">&#xe692;</span>
					{{num}}
				</div>
			</div>
		</div>
		<fade-animation>
			<common-garllay
			@close = "handleGallaryClose" 
			:imgs = "gallaryImgs"
			v-show="showGallary">
			</common-garllay>
		</fade-animation>		
	</div>
	
</template>

<script>
	import CommonGarllay from 'common/gallary/Gallary'
	import FadeAnimation from 'common/fade/Fade'
	export default {
		name:"DetailBanner",
		props:{
			sightName:String,
			bannerImg:String,
			gallaryImgs:Array			
		},
		data:function(){
			return{				
				showGallary:false	
			}			
		},
		components:{
			CommonGarllay,
			FadeAnimation
		},
		computed:{
			num:function(){
				return this.gallaryImgs.length
			}
		},
		methods:{
			handleBannerclick:function(){
				this.showGallary = true
			},
			handleGallaryClose:function(){
				this.showGallary = false
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.banner {
		position: relative;
		height: 0;
		overflow: hidden;
		padding-bottom: 55%;
	}
	.banner-img {
		width: 100%;
	}
	.banner-info {
		display: flex;
		position: absolute;
		left: 0px;
		right: 0px;
		bottom: 0px;
		line-height: .6rem;
		color: #fff;
		background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8)) ;
	}
	.banner-title {
		flex: 1;
		font-size: .32rem;
		padding:0 .2rem ;
	}
	.banner-number{		
		line-height: .32rem;
		height: .32rem;
		padding: 0 .4rem;
		margin-top: .14rem;
		border-radius: .2rem;
		background: rgba(0,0,0,0.8);
		font-size: .24rem;
	}
	.banner-icon {
		font-size: .24rem;
	}
</style>